<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="shop">
    <input type="text" v-model="search"> <button @click=goSearch>搜索</button>
        <table>
            <thead>
                <tr>
                <th>商品</th>
                <th>价格</th>
                <th>库存</th>
                <th>添加时间</th>
            </tr>
            <tr v-for="(item,index) in goods">
                
                <td>{{item.goodsName}}</td>
                <td>{{item.goodsprice}}</td>
                <td>{{item.goods_num}}</td>
                <td>{{item.goods_addtime |dataFormat("") }}</td>
                <td><button @click=edit(index)>编辑</button><button @click=dele(item.goods_id,index)>删除</button></td>
            </tr>
            </thead>
            
        </table>
        <button @click="showaddgoods">添加</button> 
        <div v-if="add" >
            商品名:<input type="text" v-model="addgoods.goodsName">
            价格:<input type="text" v-model="addgoods.goodsprice">  
            库存:<input type="text" v-model="addgoods.goods_num">
            <button @click="addegoods"  >提交</button>
            <button @click="cancel">取消</button>
        </div>
        <div v-if="edite" >
            商品名:<input type="text" v-model="editearr.goodsName">
            价格:<input type="text" v-model="editearr.goodsprice">  
            库存:<input type="text"v-model="editearr.goods_num">
            <button @click="editgoods"  >提交</button>
            <button @click="cancel2">取消</button>
        </div>
    </div>
</body>
<script src="./js/Vue.js"></script>
<script src="./js/axios.js" ></script>
<script>    
    let app= new Vue({
        el:"#shop",
        data:{
            goods:[],
            add:0,
            tijiao:0,
            addgoods:{goodsName:"",goodsprice:"",goods_num:""}, 
            edite:0,
            editearr:{goodsName:"",goodsprice:"",goods_num:""},
            search:""

        },
        created:async function(){
        let  result= await  axios.get('http://127.0.0.1:3200/API/select')
        console.log(result.data);
        this.goods=result.data
        },
        methods:{
            goSearch: async function(){
                console.log(this.search);
                let  result= await  axios.get('http://127.0.0.1:3200/API/select?intName='+this.search)
        console.log(result.data);
        this.goods=result.data
                //intName
            },
            showaddgoods(){
                this.add=1;
            },
            addegoods:async function(){  
              console.log(this.addgoods);
              var result= await axios.post('http://127.0.0.1:3200/API/addgoods',this.addgoods)
              
              for(key in this.addgoods){
                  this.addgoods[key]=""
              }
              this.add=0;
              console.log( result.data.status);
              if(  result.data.status == 20000){
                var   result2= await  axios.get('http://127.0.0.1:3200/API/select')
                console.log(result.data);
                 this.goods=result2.data
              }

            },
            cancel(){
                this.add=0;
            },
            edit(index){
                this.editearr=this.goods[index]
                this.edite=1
              
            },
            editgoods:async function(){
        
             var  result= await axios.post('http://127.0.0.1:3200/API/editgoods',this.editearr)
             this.edite=0
            }
            ,
            cancel2(){
                this.edite=0
            },
            dele(id,index){
                axios.get('http://127.0.0.1:3200/API/deleGoods?goods_id='+id).then((e)=>{
                    console.log(e.data);
                    this.goods.splice(index,1)
                })
               
            }
        }
    })
Vue.filter("dataFormat",function(times,pattern = ""){
    
    var dt= new Date(times);
    var y = dt.getFullYear();
  var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  var d = dt.getDate().toString().padStart(2, '0');

  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  // 否则，就返回  年-月-日 时：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`;
  } else {
    // 获取时分秒
    var hh = dt.getHours().toString().padStart(2, '0');
    var mm = dt.getMinutes().toString().padStart(2, '0');
    var ss = dt.getSeconds().toString().padStart(2, '0');
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  }
})
</script>
</html>